
{{ header }}
<div id="account-register" style="background-image:url({{ login_background_image }})">
    <div class="container">
        {#{{ include(helper.template('_partial/breadcrumb')) }}#}
        <div class="row">
            {#{{ column_left }}#}
            {#{% if column_left and column_right %}#}
            {#{% set class = 'col-sm-6' %}#}
            {#{% elseif column_left or column_right %}#}
            {#{% set class = 'col-sm-9' %}#}
            {#{% else %}#}
            {#{% set class = 'col-sm-12' %}#}
            {#{% endif %}#}
            <div id="content" class="col-sm-12">
                {{ content_top }}

                <div class="register-wrapper">
                    <div class="register-pane">
                        {% if error_warning %}
                            <div class="alert alert-danger alert-dismissible">
                                <i class="fa fa-exclamation-circle"></i>
                                {{ error_warning }}
                            </div>
                        {% endif %}

                        <h1>{{ heading_title }}</h1>
                        {#<p>{{ text_account_already }}</p>#}
                        <ul class="nav nav-tabs">
                            <li id="tab-mobile" {{ register_type == 'mobile' ? 'class="active"' }}>
                                <a href="#pane-mobile" data-toggle="tab">{{ is_binding? tab_bind_mobile: tab_register_mobile}}</a>
                            </li>
                            <li id="tab-email" {{ register_type != 'mobile' ? 'class="active"' }}>
                                <a href="#pane-email" data-toggle="tab">{{ is_binding? tab_bind_email: tab_register_email }}</a>
                            </li>
                        </ul>
                        <div class="tab-content mt-2">
                            {# 邮箱注册表单 #}
                            <div class="tab-pane {{ register_type != 'mobile' ? "active": '' }}" id="pane-email">
                                <form action="{{ action }}" method="post" enctype="multipart/form-data">
                                    <fieldset id="account">
                                        <div class="form-group required" style="display: {% if customer_groups|length > 1 %} block {% else %} none {% endif %};">
                                            <label class="control-label hidden">{{ entry_customer_group }}</label>
                                            <div class="">
                                                {% for customer_group in customer_groups %}
                                                    {% if customer_group.customer_group_id == customer_group_id %}
                                                        <div class="radio">
                                                            <label>
                                                                <input type="radio" name="customer_group_id" value="{{ customer_group.customer_group_id }}" checked="checked"/>
                                                                {{ customer_group.name }}
                                                            </label>
                                                        </div>
                                                    {% else %}
                                                        <div class="radio">
                                                            <label>
                                                                <input type="radio" name="customer_group_id" value="{{ customer_group.customer_group_id }}"/>
                                                                {{ customer_group.name }}
                                                            </label>
                                                        </div>
                                                    {% endif %}
                                                {% endfor %}
                                            </div>
                                        </div>
                                        <div class="form-group hidden">
                                            <input type="text" name="type" value="email" class="form-control"/>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label hidden" for="input-fullname">
                                                {{ entry_fullname }}
                                            </label>
                                            <div class="dot">
                                                <input type="text" name="fullname" value="{{ fullname }}" placeholder="{{ entry_fullname }}" id="input-fullname" class="form-control"/>
                                                {% if error_fullname %}
                                                    <div class="text-danger">{{ error_fullname }}</div>
                                                {% endif %}
                                            </div>
                                        </div>
                                        <div class="form-group required">
                                            <label class="control-label hidden" for="input-email">
                                                {{ entry_email }}
                                            </label>
                                            <div class="dot">
                                                <input type="email" name="email" value="{{ email }}" placeholder="{{ entry_email }}" id="input-email" class="form-control"/>
                                                {% if error_email %}
                                                    <div class="text-danger">{{ error_email }}</div>
                                                {% endif %}
                                            </div>
                                        </div>

                                        {#<div class="form-group required {{ register_type != 'mobile' ? 'hidden' }}">#}
                                            {#<label class="control-label hidden" for="input-telephone">#}
                                                {#{{ entry_telephone }}#}
                                            {#</label>#}
                                            {#<div class="dot">#}
                                                {#<input type="tel" name="telephone"#}
                                                       {#value="{{ telephone }}"#}
                                                       {#placeholder="{{ entry_telephone }}"#}
                                                       {#id="input-telephone"#}
                                                       {#class="form-control"/>#}
                                                {#{% if error_telephone %}#}
                                                    {#<div class="text-danger">{{ error_telephone }}</div>#}
                                                {#{% endif %}#}
                                            {#</div>#}
                                        {#</div>#}
                                        <!-- BEGIN: 自定义字段 -->
                                        {% for custom_field in custom_fields %}
                                            {% if custom_field.type == 'select' %}
                                                <div id="custom-field{{ custom_field.custom_field_id }}"
                                                     class="form-group custom-field" data-sort="{{ custom_field.sort_order }}">
                                                    <label class="control-label"
                                                           for="input-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
                                                    <div>
                                                        <select name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]"
                                                                id="input-custom-field{{ custom_field.custom_field_id }}"
                                                                class="form-control">
                                                            <option value="">{{ text_select }}</option>
                                                            {% for custom_field_value in custom_field.custom_field_value %}
                                                                {% if register_custom_field[custom_field.location][custom_field.custom_field_id] and custom_field_value.custom_field_value_id == register_custom_field[custom_field.custom_field_id] %}
                                                                    <option value="{{ custom_field_value.custom_field_value_id }}"
                                                                            selected="selected">{{ custom_field_value.name }}</option>
                                                                {% else %}
                                                                    <option value="{{ custom_field_value.custom_field_value_id }}">{{ custom_field_value.name }}</option>
                                                                {% endif %}
                                                            {% endfor %}
                                                        </select>
                                                        {% if error_custom_field[custom_field.custom_field_id] %}
                                                            <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
                                                        {% endif %}</div>
                                                </div>
                                            {% endif %}
                                            {% if custom_field.type == 'radio' %}
                                                <div id="custom-field{{ custom_field.custom_field_id }}"
                                                     class="form-group custom-field"
                                                     data-sort="{{ custom_field.sort_order }}">
                                                    <label class="control-label">
                                                        {{ custom_field.name }}
                                                    </label>
                                                    <div>
                                                        <div>
                                                            {% for custom_field_value in custom_field.custom_field_value %}
                                                                <div class="radio">
                                                                    {% if register_custom_field[custom_field.custom_field_id] and custom_field_value.custom_field_value_id == register_custom_field[custom_field.custom_field_id] %}
                                                                        <label>
                                                                            <input type="radio"
                                                                                   name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]"
                                                                                   value="{{ custom_field_value.custom_field_value_id }}"
                                                                                   checked="checked"/>
                                                                            {{ custom_field_value.name }}
                                                                        </label>
                                                                    {% else %}
                                                                        <label>
                                                                            <input type="radio"
                                                                                   name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]"
                                                                                   value="{{ custom_field_value.custom_field_value_id }}"/>
                                                                            {{ custom_field_value.name }}
                                                                        </label>
                                                                    {% endif %}
                                                                </div>
                                                            {% endfor %}
                                                        </div>
                                                        {% if error_custom_field[custom_field.custom_field_id] %}
                                                            <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            {% endif %}
                                            {% if custom_field.type == 'checkbox' %}
                                                <div id="custom-field{{ custom_field.custom_field_id }}"
                                                     class="form-group custom-field" data-sort="{{ custom_field.sort_order }}">
                                                    <label class="control-label">{{ custom_field.name }}</label>
                                                    <div>
                                                        <div> {% for custom_field_value in custom_field.custom_field_value %}
                                                                <div class="checkbox">{% if register_custom_field[custom_field.custom_field_id] and custom_field_value.custom_field_value_id in register_custom_field[custom_field.custom_field_id] %}
                                                                        <label>
                                                                            <input type="checkbox"
                                                                                   name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}][]"
                                                                                   value="{{ custom_field_value.custom_field_value_id }}"
                                                                                   checked="checked"/>
                                                                            {{ custom_field_value.name }}</label>
                                                                    {% else %}
                                                                        <label>
                                                                            <input type="checkbox"
                                                                                   name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}][]"
                                                                                   value="{{ custom_field_value.custom_field_value_id }}"/>
                                                                            {{ custom_field_value.name }}</label>
                                                                    {% endif %} </div>
                                                            {% endfor %} </div>
                                                        {% if error_custom_field[custom_field.custom_field_id] %}
                                                            <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
                                                        {% endif %} </div>
                                                </div>
                                            {% endif %}
                                            {% if custom_field.type == 'text' %}
                                                <div id="custom-field{{ custom_field.custom_field_id }}"
                                                     class="form-group custom-field" data-sort="{{ custom_field.sort_order }}">
                                                    <label class="control-label"
                                                           for="input-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
                                                    <div>
                                                        <input type="text"
                                                               name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]"
                                                               value="{% if register_custom_field[custom_field.custom_field_id] %}{{ register_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}"
                                                               placeholder="{{ custom_field.name }}"
                                                               id="input-custom-field{{ custom_field.custom_field_id }}"
                                                               class="form-control"/>
                                                        {% if error_custom_field[custom_field.custom_field_id] %}
                                                            <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
                                                        {% endif %} </div>
                                                </div>
                                            {% endif %}
                                            {% if custom_field.type == 'textarea' %}
                                                <div id="custom-field{{ custom_field.custom_field_id }}"
                                                     class="form-group custom-field" data-sort="{{ custom_field.sort_order }}">
                                                    <label class="control-label"
                                                           for="input-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
                                                    <div>
                                                        <textarea
                                                                name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]"
                                                                rows="5" placeholder="{{ custom_field.name }}"
                                                                id="input-custom-field{{ custom_field.custom_field_id }}"
                                                                class="form-control">{% if register_custom_field[custom_field.custom_field_id] %}{{ register_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}</textarea>
                                                        {% if error_custom_field[custom_field.custom_field_id] %}
                                                            <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
                                                        {% endif %} </div>
                                                </div>
                                            {% endif %}
                                            {% if custom_field.type == 'file' %}
                                                <div id="custom-field{{ custom_field.custom_field_id }}"
                                                     class="form-group custom-field" data-sort="{{ custom_field.sort_order }}">
                                                    <label class="control-label">{{ custom_field.name }}</label>
                                                    <div>
                                                        <button type="button"
                                                                id="button-custom-field{{ custom_field.custom_field_id }}"
                                                                data-loading-text="{{ text_loading }}" class="btn btn-default">
                                                            <i class="fa fa-upload"></i> {{ button_upload }}</button>
                                                        <input type="hidden"
                                                               name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]"
                                                               value="{% if register_custom_field[custom_field.custom_field_id] %}  {{ register_custom_field[custom_field.custom_field_id] }} {% endif %}"/>
                                                        {% if error_custom_field[custom_field.custom_field_id] %}
                                                            <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
                                                        {% endif %}</div>
                                                </div>
                                            {% endif %}
                                            {% if custom_field.type == 'date' %}
                                                <div id="custom-field{{ custom_field.custom_field_id }}"
                                                     class="form-group custom-field" data-sort="{{ custom_field.sort_order }}">
                                                    <label class="control-label"
                                                           for="input-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
                                                    <div>
                                                        <div class="input-group date">
                                                            <input type="text"
                                                                   name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]"
                                                                   value="{% if register_custom_field[custom_field.custom_field_id] %}{{ register_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}"
                                                                   placeholder="{{ custom_field.name }}"
                                                                   data-date-format="YYYY-MM-DD"
                                                                   id="input-custom-field{{ custom_field.custom_field_id }}"
                                                                   class="form-control"/>
                                                            <div class="input-group-btn">
                                                                <button type="button" class="btn btn-default"><i
                                                                            class="fa fa-calendar"></i></button>
                                                            </div>
                                                        </div>
                                                        {% if error_custom_field[custom_field.custom_field_id] %}
                                                            <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
                                                        {% endif %} </div>
                                                </div>
                                            {% endif %}
                                            {% if custom_field.type == 'time' %}
                                                <div id="custom-field{{ custom_field.custom_field_id }}"
                                                     class="form-group custom-field" data-sort="{{ custom_field.sort_order }}">
                                                    <label class="control-label"
                                                           for="input-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
                                                    <div>
                                                        <div class="input-group time">
                                                            <input type="text"
                                                                   name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]"
                                                                   value="{% if register_custom_field[custom_field.custom_field_id] %}{{ register_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}"
                                                                   placeholder="{{ custom_field.name }}"
                                                                   data-date-format="HH:mm"
                                                                   id="input-custom-field{{ custom_field.custom_field_id }}"
                                                                   class="form-control"/>
                                                            <div class="input-group-btn">
                                                                <button type="button" class="btn btn-default"><i
                                                                            class="fa fa-calendar"></i></button>
                                                            </div>
                                                        </div>
                                                        {% if error_custom_field[custom_field.custom_field_id] %}
                                                            <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
                                                        {% endif %} </div>
                                                </div>
                                            {% endif %}
                                            {% if custom_field.type == 'time' %}
                                                <div id="custom-field{{ custom_field.custom_field_id }}"
                                                     class="form-group custom-field" data-sort="{{ custom_field.sort_order }}">
                                                    <label class="control-label"
                                                           for="input-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
                                                    <div>
                                                        <div class="input-group datetime">
                                                            <input type="text"
                                                                   name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]"
                                                                   value="{% if register_custom_field[custom_field.custom_field_id] %}{{ register_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}"
                                                                   placeholder="{{ custom_field.name }}"
                                                                   data-date-format="YYYY-MM-DD HH:mm"
                                                                   id="input-custom-field{{ custom_field.custom_field_id }}"
                                                                   class="form-control"/>
                                                            <div class="input-group-btn">
                                                                <button type="button" class="btn btn-default"><i
                                                                            class="fa fa-calendar"></i></button>
                                                            </div>
                                                        </div>
                                                        {% if error_custom_field[custom_field.custom_field_id] %}
                                                            <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
                                                        {% endif %} </div>
                                                </div>
                                            {% endif %}
                                        {% endfor %}
                                        <!-- END: 自定义字段 -->
                                    </fieldset>
                                    <fieldset class="password">
                                        <div class="form-group required">
                                            <label class="control-label hidden"
                                                   for="input-password">{{ entry_password }}</label>
                                            <div class="dot">
                                                <input type="password" name="password" value="{{ password }}"
                                                       placeholder="{{ entry_password }}" id="input-password"
                                                       class="form-control"/>
                                                {% if error_password %}
                                                    <div class="text-danger">{{ error_password }}</div>
                                                {% endif %} </div>
                                        </div>
                                        <div class="form-group required">
                                            <label class="control-label hidden"
                                                   for="input-confirm">{{ entry_confirm }}</label>
                                            <div class="dot">
                                                <input type="password" name="confirm" value="{{ confirm }}"
                                                       placeholder="{{ entry_confirm }}" id="input-confirm"
                                                       class="form-control"/>
                                                {% if error_confirm %}
                                                    <div class="text-danger">{{ error_confirm }}</div>
                                                {% endif %} </div>
                                        </div>
                                    </fieldset>
                                    <fieldset class="hidden">
                                        <div class="form-group">
                                            <label class="control-label">{{ entry_newsletter }}</label>
                                            <div>
                                                {% if newsletter %}
                                                    <label class="radio-inline">
                                                        <input type="radio" name="newsletter" value="1" checked="checked"/>
                                                        {{ text_yes }}
                                                    </label>
                                                    <label class="radio-inline">
                                                        <input type="radio" name="newsletter" value="0"/>
                                                        {{ text_no }}
                                                    </label>
                                                {% else %}
                                                    <label class="radio-inline">
                                                        <input type="radio" name="newsletter" value="1"/>
                                                        {{ text_yes }}
                                                    </label>
                                                    <label class="radio-inline">
                                                        <input type="radio" name="newsletter" value="0" checked="checked"/>
                                                        {{ text_no }}
                                                    </label>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </fieldset>
                                    {{ captcha }}

                                        <div class="form-group binding-policy">
                                                <div class="binding">
                                                    {% if is_binding %}
                                                        <a href="{{ binding_existing_account_href }}">
                                                            {{ text_bind_existing_account }}
                                                        </a>
                                                    {% endif %}
                                                </div>

                                            {% if text_agree %}
                                                <div class="policy">
                                                    {% if agree %}
                                                        <input type="checkbox" name="agree" value="1" checked="checked"/>
                                                    {% else %}
                                                        <input type="checkbox" name="agree" value="1"/>
                                                    {% endif %}
                                                    {{ text_agree }}
                                                </div>
                                            {% endif %}
                                        </div>

                                    <div class="form-group">
                                        <div class="">
                                            <input type="submit" value="{{ is_binding ? button_continue: button_confirm }}" class="btn btn-primary"/>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            {# 手机注册表单 #}
                            <div class="tab-pane {{ register_type == 'mobile' ? "active": '' }}" id="pane-mobile">
                                <form>
                                    <div class="form-group hidden">
                                        <input type="text" name="type" value="telephone " class="form-control"/>
                                    </div>
                                    <div class="form-group name">
                                        <div class="">
                                            <input type="text" name="fullname" value="{{ fullname }}" placeholder="{{ entry_fullname }}" class="form-control"/>
                                            <div class="text-danger "></div>
                                        </div>
                                    </div>

                                    <div class="form-group required telephone-wrapper">
                                        <div class="dial_code">
                                            <input name="dial_code" value="86" class="form-control">
                                        </div>
                                        <div class="dot telephone">
                                            <input type="tel" name="telephone"
                                                   value="{{ telephone }}"
                                                   placeholder="{{ entry_telephone }}"
                                                   id="mobile-telephone"
                                                   class="form-control"/>
                                            <div class="text-danger "></div>
                                        </div>
                                    </div>

                                    <div class="form-group required verify-code">
                                        <div class="verify-code">
                                            <input type="text" name="verify_code" value=""/>
                                            <button class="btn btn-primary">{{ text_verify_code }}</button>
                                            <div class="text-danger "></div>
                                        </div>
                                    </div>

                                    <fieldset>
                                        <div class="form-group required password">
                                            <div class="dot">
                                                <input type="password" name="password" value="{{ password }}"
                                                       placeholder="{{ entry_password }}" id="mobile-password"
                                                       class="form-control"/>
                                                <div class="text-danger "></div>
                                            </div>
                                        </div>
                                    </fieldset>

                                    <div class="form-group binding-policy">
                                        <div class="binding">
                                            {% if is_binding %}
                                                <a href="{{ binding_existing_account_href }}">
                                                    {{ text_bind_existing_account }}
                                                </a>
                                            {% endif %}
                                        </div>

                                        {% if text_agree %}
                                        <div class="policy">
                                            <input type="checkbox" name="agree" value="1"/>
                                            {{ text_agree }}
                                        </div>
                                        {% endif %}
                                    </div>

                                    <div class="form-group">
                                        <div class="">
                                            <input type="submit" value="{{ is_binding ? button_continue: button_confirm }}" class="btn btn-primary"/>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="success-pane">
                        
                        <div class="success-icon">
                            <img src="catalog/view/theme/{{ helper.config('theme_default_directory') }}/image/ok@2x.png" alt="">
                        </div>
                        <h3>
                            {{ text_success }}!
                        </h3>
                        <a href="/index.php?route=account/login">{{ text_go_to_login }}></a>
                    </div>

                </div>
                {{ content_bottom }}

            </div>
            {#{{ column_right }}#}
        </div>
    </div>
</div>
<script type="text/javascript" src="/catalog/view/javascript/libs/qs.min.js"></script>
<script type="text/javascript"><!--

    // Sort the custom fields
    $('#account .form-group[data-sort]').detach().each(function () {
        if ($(this).attr('data-sort') >= 0 && $(this).attr('data-sort') <= $('#account .form-group').length) {
            $('#account .form-group').eq($(this).attr('data-sort')).before(this);
        }

        if ($(this).attr('data-sort') > $('#account .form-group').length) {
            $('#account .form-group:last').after(this);
        }

        if ($(this).attr('data-sort') == $('#account .form-group').length) {
            $('#account .form-group:last').after(this);
        }

        if ($(this).attr('data-sort') < -$('#account .form-group').length) {
            $('#account .form-group:first').before(this);
        }
    });

    $('input[name=\'customer_group_id\']').on('change', function () {
        $.ajax({
            url: 'index.php?route=account/register/customfield&customer_group_id=' + this.value,
            dataType: 'json',
            success: function (json) {
                $('.custom-field').hide();
                $('.custom-field').removeClass('required');

                for (i = 0; i < json.length; i++) {
                    custom_field = json[i];

                    $('#custom-field' + custom_field['custom_field_id']).show();

                    if (custom_field['required']) {
                        $('#custom-field' + custom_field['custom_field_id']).addClass('required');
                    }
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });
    });

    $('input[name=\'customer_group_id\']:checked').trigger('change');
    //--></script>
<script type="text/javascript"><!--
    $('button[id^=\'button-custom-field\']').on('click', function () {
        var element = this;

        $('#form-upload').remove();

        $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" /></form>');

        $('#form-upload input[name=\'file\']').trigger('click');

        if (typeof timer != 'undefined') {
            clearInterval(timer);
        }

        timer = setInterval(function () {
            if ($('#form-upload input[name=\'file\']').val() != '') {
                clearInterval(timer);

                $.ajax({
                    url: 'index.php?route=tool/upload',
                    type: 'post',
                    dataType: 'json',
                    data: new FormData($('#form-upload')[0]),
                    cache: false,
                    contentType: false,
                    processData: false,
                    beforeSend: function () {
                        $(element).button('loading');
                    },
                    complete: function () {
                        $(element).button('reset');
                    },
                    success: function (json) {
                        $(element).parent().find('.text-danger').remove();

                        if (json['error']) {
                            $(element).parent().find('input').after('<div class="text-danger">' + json['error'] + '</div>');
                        }

                        if (json['success']) {
                            alert(json['success']);

                            $(element).parent().find('input').val(json['code']);
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                    }
                });
            }
        }, 500);
    });
    //--></script>
<script type="text/javascript"><!--
    $('.date').datetimepicker({
        language: '{{ datepicker }}',
        pickTime: false
    });

    $('.time').datetimepicker({
        language: '{{ datepicker }}',
        pickDate: false
    });

    $('.datetime').datetimepicker({
        language: '{{ datepicker }}',
        pickDate: true,
        pickTime: true
    });
    //--></script>

<script type="text/javascript"><!--
    // $('#tab-email').on('click', function () {
    //     $('input[name=\'email\']').parent().parent().removeClass('hidden');
    //     $('input[name=\'telephone\']').parent().parent().addClass('hidden');
    //     $('input[name=\'telephone\']').val('');
    //     $('input[name=\'type\']').val('email');
    // });
    // $('#tab-mobile').on('click', function () {
    //     $('input[name=\'telephone\']').parent().parent().removeClass('hidden');
    //     $('input[name=\'email\']').parent().parent().addClass('hidden');
    //     $('input[name=\'email\']').val('');
    //     $('input[name=\'type\']').val('mobile');
    // });
    //--></script>


<script>
    $(function () {

        var code = '{{ code }}';
        var language_map = {
            'en': 'en-gb',
            'zh_cn': 'zh-cn'
        };

        var language = language_map[code];
        var login_url = location.origin + '/index.php?route=account/login';
        var verify_code_api = location.origin + '/api/v1/app/common/send-phone-verify-code?language='+language;
        var register_api = location.origin + '/api/v1/app/customer/register';
        var $telephone = $('#pane-mobile input[name="telephone"]');
        var $verifyCode = $('#pane-mobile input[name="verify_code"]');
        var $policyCheckbox = $('#pane-mobile .policy input[type="checkbox"]');
        var $password = $('#pane-mobile input[type="password"]');
        var $fullname = $('#pane-mobile input[name="fullname"]');
        var $dialCode = $('#pane-mobile input[name=\"dial_code\"]');
        var $registerWrapper = $('.register-wrapper');
        var $dangers = {
            name: $('#pane-mobile .name .text-danger'),
            telephone: $('#pane-mobile .telephone .text-danger'),
            password: $('#pane-mobile .password .text-danger'),
        };
        var dangerText = {
            password: '{{ danger_password }}',
            verify_ode: '{{ danger_verify_code }}',
            telephone: '{{ danger_telephone }}',
            name: '{{ danger_fullname }}',
            agree: '{{ danger_agree }}'
        };

        $telephone.on('change', function () {
            $dangers.telephone.text('');
        });

        $policyCheckbox.on('change', function () {
            if($(this).prop('checked')){
                removeAlertDanger();
            }
        });

        /**
         *  切换tab 删除错误提示
         */
        $('#tab-email, #tab-mobile').on('click', function () {
            removeAlertDanger();
        });

        /**
         * 删除错误提示
         */
        function removeAlertDanger(){
            $registerWrapper.find('.alert-danger').remove();
        }

        /**
         * 展示错误提示
         */
        function showAlertDanger(text){
            removeAlertDanger();
            var $alertDanger = $(
                '<div class="alert alert-danger alert-dismissible">' +
                    '<i class="fa fa-exclamation-circle"></i>' +
                    text +
                '</div>');
            $registerWrapper.prepend($alertDanger);
        }

        /**
         * 发送验证码
         */
        $('#pane-mobile .verify-code button.btn').click(function (e) {
            e.preventDefault();
            if($telephone.val().length >5) {
                // 禁用按钮
                disableButton($(e.target));
                // 添加倒计时提示
                var tips = addCountdownTips($(e.target), 60, function () {
                    // 倒计时完成回调
                    enableButton($(e.target));
                });
                // 发送验证码
                asyncPost(verify_code_api, {
                    "telephone": $telephone.val(),
                    "debug":1,
                    "dial_code": $dialCode.val(),
                    // "language":language,
                }, function (data) {
                    $dangers.telephone.text('');
                }, function (error) {
                    $dangers.telephone.text(error.message);
                    enableButton($(e.target));
                    tips.clear();
                })
            }else {
                $dangers.telephone.text(dangerText.telephone);
            }
        });

        /**
         * 禁用按钮
         * @param  $btn
         */
        function disableButton($btn){
            $btn.addClass('disabled')
                .prop('disabled', true);
        }

        /**
         * 启用按钮
         */
        function enableButton($btn) {
            $btn.removeClass('disabled')
                .prop('disabled', false);
        }

        /**
         * 添加倒计时提示
         * @param {Object} $btn
         * @Param {Number} duration
         * @Param {Function} cb
         */
        function addCountdownTips($btn, duration, cb) {
            var originText = $btn.text();
            var timer = window.setInterval(function () {
                $btn.text(duration + 's');
                duration = duration -1;
                if (duration === 0) {
                    window.clearInterval(timer);
                    $btn.text(originText);
                    cb.call(null)
                }
            } ,1000);
            return {
                // 清除定时器方法
                clear: function () {
                    window.clearInterval(timer);
                    $btn.text(originText);
                }
            }
        }

        /**
         * 异步请求
         * @param url
         * @param body
         * @param successFn
         * @param errorFn
         */
        function asyncPost(url, body, successFn, errorFn) {
            $.ajax({
                url: url,
                type: 'post',
                dataType: 'json',
                data: body,
                success: function(response) {
                    if(response.code !== 0) {
                        errorFn.call(null, new Error(response.error))
                    }else {
                        successFn.call(null, response);
                    }
                },
                error: function (error) {
                    errorFn.call(null, error)
                }
            });
        }

        /**
         *  处理重置密码
         */
        $('#pane-mobile input[type="submit"]').click(function (e) {
            e.preventDefault();
            var telphone = $telephone.val();
            var verifyCode =$verifyCode.val();
            var password = $password.val();
            var fullname = $fullname.val();
            var dialCode = $dialCode.val();

            if (!$policyCheckbox.prop('checked')){ // 是否同意条款
                showAlertDanger(dangerText.agree);
                return;
            }

            if (telphone.length <5 || verifyCode.length !== 6 || password.length < 4) {
                layer.open({
                    skin: 'layer-alert',
                    btnAlign: 'c',
                    title: ' ',
                    content: '{{ text_invalid_form }}'
                });
            } else {
                var parameters = {
                    type: 'telephone',
                    telephone: telphone,
                    verify_code: verifyCode,
                    password: password,
                    fullname: fullname,
                    language: language,
                    dial_code: dialCode,
                };

                // 处理第三方授权参数
                var query = Qs.parse(window.location.search.replace(/^\?/, ''));
                if(query.oauth_type && query.oauth_user_id){
                    Object.assign(parameters, {oauth_type: query.oauth_type, oauth_user_id: query.oauth_user_id});
                }

                asyncPost(register_api, parameters, function (response) {
                    // 注册成成功
                    showSuccessPane();
                }, function (error) {
                    layer.open({
                        skin: 'layer-alert',
                        btnAlign: 'c',
                        title: ' ',
                        content: error.message
                    });
                })
            }
        });

        function showSuccessPane() {
            $('.register-pane').hide();
            $('.success-pane').show();
        }
    })
</script>

<link href="catalog/view/javascript/dial-code.css" rel="stylesheet">
<script type="text/javascript" src="catalog/view/javascript/initialize-dial-code.js"></script>
<script>
    /**
     * 初始化选择
     * @type {boolean}
     */
    var isChinese = /^zh/.test("{{ code }}");
    $('input[name="dial_code"]').dialCode({
        isChinese: isChinese,
    })
</script>


{{ include(helper.template('account/common_style')) }}

{{ footer }}


